<template>
  <div class="user">
    <MainSlot>
      <span slot="title">用户管理</span>
      <button slot="one" @click="add">添加用户</button>
      <button slot="two" @click="update">编辑用户</button>
      <button slot="three" @click="del">删除用户</button>
      <button slot="four">退出</button>
    </MainSlot>

    <div class="zzc" v-if="isShow">
      <div class="add">
        <div class="title">{{ title }}</div>
        <div class="container">
          <div class="item">
            <span
              >用<span class="bank8"></span>户<span class="bank8"></span
              >名：</span
            >
            <el-input v-model="name" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>姓<span class="bank32"></span>名：</span>
            <el-input v-model="pName" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>密<span class="bank32"></span>码：</span>
            <el-input v-model="password" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>联系电话：</span>
            <el-input v-model="phone" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>确认密码：</span>
            <el-input v-model="pwd2" placeholder=""></el-input>
          </div>
          <div class="item">
            <span>用户身份：</span>
            <el-input v-model="role" placeholder=""></el-input>
          </div>
        </div>
        <el-checkbox-group v-model="checkList">
          <div class="box-item">
            <el-checkbox label="系统管理权限"></el-checkbox>
          </div>
          <div class="box-item">
            <el-checkbox label="计划管理权限"></el-checkbox>
          </div>
          <div class="box-item">
            <el-checkbox label="录取管理权限"></el-checkbox>
          </div>
          <div class="box-item">
            <el-checkbox label="分班管理权限"></el-checkbox>
          </div>
          <div class="box-item">
            <el-checkbox label="打印管理权限"></el-checkbox>
          </div>
          <div class="box-item">
            <el-checkbox label="银行管理权限"></el-checkbox>
          </div>
        </el-checkbox-group>
        <button @click="ok">{{ info }}</button>
        <button @click="cancel">退出</button>
      </div>
    </div>

    <el-table ref="singleTable" :data="tableData" height="720" border style="width: 100%" highlight-current-row @current-change="handleChange">
      <!-- <el-table-column prop="n1" label="行号" width="100"> </el-table-column> -->
      <el-table-column prop="name" label="用户名" width="140">
      </el-table-column>
      <el-table-column prop="password" label="密码" width="180">
      </el-table-column>
      <el-table-column prop="pName" label="姓名" width="140"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="role" label="用户身份" width="140">
      </el-table-column>
      <el-table-column prop="xtgl" label="系统管理" width="140">
      </el-table-column>
      <el-table-column prop="jhgl" label="计划管理" width="140">
      </el-table-column>
      <el-table-column prop="lqgl" label="录取管理" width="140">
      </el-table-column>
      <el-table-column prop="fbgl" label="分班管理" width="140">
      </el-table-column>
      <!-- <el-table-column prop="n11" label="招生宣传" width="100"> </el-table-column>
      <el-table-column prop="n12" label="决策支持" width="100"> </el-table-column> -->
      <el-table-column prop="dygl" label="打印管理" width="140">
      </el-table-column>
      <el-table-column prop="yhkgl" label="银行卡信息管理" width="140">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { request } from "../../network/request";
import MainSlot from "../common/MainSlot";
export default {
  name: "",
  created() {
    if (sessionStorage.token == undefined) {
      this.$router.replace("/login");
    }
  },
  data() {
    return {
      isShow: false,
      title: "添加用户",
      info: "添加",
      tableData: [
        {
          n1: "1",
          n2: "管理员",
          n3: "123456",
          n4: "小袁",
          n5: "18890011656",
          n6: "管理员",
          n7: "有",
          n8: "有",
          n9: "有",
          n10: "有",
          n11: "有",
          n12: "有",
          n13: "有",
          n14: "有",
        },
      ],
      checkList: [],
      name: "",
      pName: "",
      password: "",
      pwd2: "",
      phone: "",
      role: "",
    };
  },
  methods: {
    handleChange(val) {
      if(val == null) {
        return
      }
      this.name = val.name
      this.pName = val.pName
      this.password = val.password
      this.pwd2 = val.password
      this.phone = val.phone
      this.role = val.role
      this.checkList = []
      if(val.dygl == '1') {
        this.checkList.push('打印管理权限')
      }
      if(val.xtgl == '1') {
        this.checkList.push('系统管理权限')
      }
      if(val.jhgl == '1') {
        this.checkList.push('计划管理权限')
      }
      if(val.lqgl == '1') {
        this.checkList.push('录取管理权限')
      }
      if(val.fbgl == '1') {
        this.checkList.push('分班管理权限')
      }
      if(val.yhkgl == '1') {
        this.checkList.push('银行管理权限')
      }
    },
    add() {
      this.name = ""
      this.pName = ""
      this.password = ""
      this.pwd2 = ""
      this.phone = ""
      this.role = ""
      this.checkList = []
      // this.$refs.singleTable.setCurrentRow()
      this.title = "添加用户";
      this.info = "添加";
      this.isShow = true;
    },
    update() {
      this.title = "编辑用户";
      this.info = "确定修改";
      this.isShow = true;
    },
    del() {
      let a = prompt("请输入希望删除用户的用户名：");
      if (a != null && a != "") {
        // alert("删除成功");
        request({
          url: "http://118.31.51.131:8081/api/zsxt/deleteUser",
          method: "post",
          params: {
            name: a,
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/qxck",
            method: "get",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
        });
      }
    },
    ok() {
      this.isShow = false;
      console.log(this.checkList.indexOf("系统管理权限") != -1 ? "1" : "0");
      if (
        this.name == "" ||
        this.pName == "" ||
        this.password == "" ||
        this.pwd2 == "" ||
        this.phone == "" ||
        this.role == ""
      ) {
        alert("请填写必要信息");
        return;
      }
      if (
        this.title == "添加用户" &&
        this.name != "" &&
        this.password == this.pwd2
      ) {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/user/Insert",
          method: "post",
          data: {
            dygl: this.checkList.indexOf("打印管理权限") != -1 ? "1" : "0",
            fbgl: this.checkList.indexOf("分班管理权限") != -1 ? "1" : "0",
            jhgl: this.checkList.indexOf("计划管理权限") != -1 ? "1" : "0",
            lqgl: this.checkList.indexOf("录取管理权限") != -1 ? "1" : "0",
            name: this.name,
            password: this.password,
            phone: this.phone,
            pname: this.pName,
            qrPqssword: this.pwd2,
            role: this.role,
            xtgl: this.checkList.indexOf("系统管理权限") != -1 ? "1" : "0",
            yhkgl: this.checkList.indexOf("银行管理权限") != -1 ? "1" : "0",
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/qxck",
            method: "get",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
        });
      }
      if (
        this.title == "编辑用户" &&
        this.name != "" &&
        this.password == this.pwd2
      ) {
        request({
          url: "http://118.31.51.131:8081/api/zsxt/update",
          method: "post",
          data: {
            dygl: this.checkList.indexOf("打印管理权限") != -1 ? "1" : "0",
            fbgl: this.checkList.indexOf("分班管理权限") != -1 ? "1" : "0",
            jhgl: this.checkList.indexOf("计划管理权限") != -1 ? "1" : "0",
            lqgl: this.checkList.indexOf("录取管理权限") != -1 ? "1" : "0",
            name: this.name,
            password: this.password,
            phone: this.phone,
            pname: this.pName,
            qrPqssword: this.pwd2,
            role: this.role,
            xtgl: this.checkList.indexOf("系统管理权限") != -1 ? "1" : "0",
            yhkgl: this.checkList.indexOf("银行管理权限") != -1 ? "1" : "0",
          },
          params: {
            token: sessionStorage.getItem("token"),
          },
        }).then((value) => {
          console.log(value);
          request({
            url: "http://118.31.51.131:8081/api/zsxt/qxck",
            method: "get",
            params: {
              token: sessionStorage.getItem("token"),
            },
          }).then((value) => {
            console.log(value);
            this.tableData = value.data;
          });
        });
      }
    },
    cancel() {
      this.isShow = false;
    },
  },
  beforeCreate() {
    if (sessionStorage.getItem("token") == null) {
      this.$router.push("/login");
    } else {
      let token = sessionStorage.getItem("token");
      let length = sessionStorage.getItem("token").length;
      if (token[length - 6] == "0") {
        this.$router.push("/function/lnzsjhcx");
      }
    }
  },
  created() {
    request({
      url: "http://118.31.51.131:8081/api/zsxt/qxck",
      method: "get",
      params: {
        token: sessionStorage.getItem("token"),
      },
    }).then((value) => {
      console.log(value);
      this.tableData = value.data;
    });
  },
  components: {
    MainSlot,
  },
};
</script>

<style scoped>
.zzc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.zzc .add {
  position: absolute;
  left: calc(50% - 180px);
  top: calc(50% - 220px);
  height: 500px;
  width: 600px;
  border-radius: 50px;
  background-color: #fff;
}
.zzc button {
  width: 120px;
  height: 36px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  background-color: rgb(192, 51, 56);
}
.zzc button:active {
  opacity: 0.8;
}
.zzc button:nth-of-type(1) {
  margin: 40px 0 0 150px;
}
.zzc button:nth-of-type(2) {
  margin: 40px 0 0 60px;
}
.add .title {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 24px;
  /* font-weight: 700; */
}
.add .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* margin-top: 80px; */
}
.container .item {
  height: 60px;
}
.el-input {
  width: 180px;
}
.bank8 {
  margin-left: 8px;
}
.bank32 {
  margin-left: 32px;
}
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}
.box-item {
  width: 33%;
  height: 30px;
  text-align: center;
}
.user ::v-deep .el-checkbox__label {
  font-size: 18px;
  /* width: 100px; */
}
.user ::v-deep .el-table .cell {
  text-align: center;
}
</style>